<template>
	<view class="page">
		<nav-bar :shadow="false">朋友圈素材</nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="material_box" v-for="(item,index) of dataList" :key="index">
				<view class="title">{{item.title}}</view>
				<view class="content">{{item.content}}</view>
				<text @click="onCopy(item.content)">复制文案</text>
				<view class="img_box">
					<image :src="childItem" mode="aspectFill" v-for="(childItem,childIndex) of item.imgList" :key="childIndex" @click="onPreviewImage(childIndex, item.imgList)"></image>
				</view>
			</view>
		</mescroll-body>

	</view>
</template>
<script>
	import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false, //是否在初始化后,自动执行downCallback; 默认true,
				},
				dataList: []
			};
		},
		//第一次加载
		onLoad(e) {
			this.loadData(1);
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.loadData(1);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.loadData(page.num);
			},
			loadData(pageNo) {
				let httpData = {
					pageNo: pageNo,
					pageSize: 15
				};
				this.$http
					.post('api/moments_content/v1/list', httpData, {
						load: false
					}).then(res => {
						uni.stopPullDownRefresh();
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
						if (pageNo == 1) {
							this.dataList = res.data;
						} else {
							this.dataList = this.dataList.concat(res.data);
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
			},
			onPreviewImage(index, imgs) {
				if (imgs && Array.isArray(imgs) && imgs.length > 0) {
					console.log("222");
					uni.previewImage({
						current: imgs[index],
						urls: imgs
					});
				}
			},
			onCopy(data) {
				if (data) {
					uni.setClipboardData({
						data: data,
						success: function() {
							uni.showToast({
								title: '复制成功'
							});
						}
					});
				}
			},
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.page {
		background-color: #fff;
		min-height: 100vh;
	}

	.material_box {
		border-bottom: 1rpx solid #e5e5e5;
		padding: 0 32rpx 20rpx 32rpx;

		.title {
			padding: 40rpx 0;
			font-size: 32rpx;
			color: #333333;
		}

		.content {
			font-size: 28rpx;
			color: #333333;
			line-height: 42rpx;
		}

		text {
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #f9a633;
		}

		.img_box {
			display: flex;
			flex-wrap: wrap;

			image {
				width: 220rpx;
				height: 220rpx;
				border-radius: 8rpx;
				background-color: #7AC23C;
				margin-top: 24rpx;
				margin-right: 12rpx;
				margin-bottom: 12rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>
